<template>
  <el-row type="flex" justify="space-between" align="middle">
    <el-col :span="4">
      <slot name="left" />
    </el-col>
    <el-col :span="14">
      <el-row type="flex" justify="end">
        <el-select v-if="category" v-model="categoryFilter">
          <el-option :value="-1" label="全部分类" />
          <el-option v-for="item in categoryList" :key="item.id" :value="item.id" :label="item.title" />
        </el-select>
        <el-select v-if="agent" v-model="agentFilter">
          <el-option :value="-1" label="全部经纪" />
          <el-option v-for="item in agentList" :key="item.id" :value="item.id" :label="item.name" />
        </el-select>
        <el-input v-model="titleFilter" placeholder="请输入关键字" />
        <el-button @click="useFilter">筛选</el-button>
      </el-row>
    </el-col>
  </el-row>
</template>
<script>
export default {
  props: {
    category: {
      type: Boolean,
      default: false
    },
    agent: {
      type: Boolean,
      default: false
    },
    categoryList: {
      type: Array,
      default: () => ([])
    },
    agentList: {
      type: Array,
      default: () => ([])
    }
  },
  data() {
    return {
      categoryFilter: -1,
      agentFilter: -1,
      titleFilter: ''
    }
  },
  created() {
  },
  methods: {
    createFilter() {
      // 返回筛选选项，用于拼接进请求参数
      const filter = {}
      if (this.agentFilter && this.agentFilter !== -1) {
        filter.agent_contains = this.agentFilter
      }
      if (this.categoryFilter && this.categoryFilter !== -1) {
        filter.category_contains = this.categoryFilter
      }
      if (this.titleFilter) {
        filter.title_contains = this.titleFilter
      }
      return filter
    },
    useFilter() {
      console.log('emit')
      this.$emit('use', this.createFilter())
    }
  }
}
</script>
<style lang="">

</style>
